<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="请按照关键字搜索"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
          <el-button type="primary" @click="handleQuery">
            <i-ep-search />
            搜索
          </el-button>
        </el-form-item>
        <el-form-item> </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <template #header>
        <div class="flex justify-between">
          <div>
            <el-button type="primary" @click="handleExamine()">
              开户审批
            </el-button>
            <el-button type="primary" @click="handleStatus()">
              操作账户状态
            </el-button>
            <el-button type="primary" @click="openDetaill()">
              审批账户状态
            </el-button>
          </div>
        </div>
      </template>

      <el-table
        v-loading="loading"
        :data="tableList"
        highlight-current-row
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          key="username"
          label="账户名称"
          align="center"
          prop="username"
          width="120"
        />
        <el-table-column
          key="checkStatusName"
          label="审核状态"
          width="80"
          align="center"
          prop="checkStatusName"
        />

        <el-table-column
          key="accountStatusName"
          label="账户状态"
          width="80"
          align="center"
          prop="accountStatusName"
        />
        <el-table-column
          key="bankNo"
          label="银行账号"
          width=""
          align="center"
          prop="bankNo"
        >
        </el-table-column>

        <el-table-column
          key="bankType"
          label="开户银行"
          align="center"
          width="130"
          prop="bankType"
        >
          <template #default="scope">
            {{ bankTypeFilter(scope.row.bankType) }}
          </template>
        </el-table-column>
        <el-table-column
          key="bankMark"
          label="银行是否对账户设置特殊标识"
          width="195"
          align="center"
          prop="bankMark"
        >
          <template #default="scope">
            {{ scope.row.bankMark ? "是" : "否" }}
          </template>
        </el-table-column>

        <el-table-column
          key="balance"
          label="工资专户余额(万元)"
          width="140"
          align="center"
          prop="balance"
        />
        <el-table-column
          key="createTime"
          label="申请时间"
          width="150"
          align="center"
          prop="createTime"
        />
        <el-table-column
          key="openDate"
          label="开户日期"
          width="150"
          align="center"
          prop="openDate"
        />
        <el-table-column
          key="operationTime"
          label="账户注销日期"
          width="150"
          align="center"
          prop="operationTime"
        >
          <template #default="scope">
            {{ scope.row.accountStatus == 5 ? scope.row.operationTime : "" }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          :width="mobile === 'mobile' ? 110 : 220"
        >
          <template #default="scope">
            <el-button
              type="primary"
              link
              size="small"
              @click="openDetaill(scope.row)"
            >
              <i-ep-grid />
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageIndex"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>

    <ExamineForm
      v-if="dialogExamine.visible"
      class="detail"
      :style="{
        '--mobileAddFormHeight':
          mobile === 'mobile' ? screenHeight - 117 + 'px' : 'auto',
      }"
      :dialog-examine="dialogExamine"
      :data="currentProjectAccount"
      @send-close="sendClose"
    ></ExamineForm>

    <ChangeStatusForm
      v-if="dialogStatus.visible"
      class="detail"
      :style="{
        '--mobileAddFormHeight':
          mobile === 'mobile' ? screenHeight - 117 + 'px' : 'auto',
      }"
      :dialog-status="dialogStatus"
      :data="currentProjectAccount"
      :change-project-account-status="changeProjectAccountStatus"
      @send-close="sendClose"
    ></ChangeStatusForm>

    <detail-description
      v-if="dialogDetail.visible"
      class="detail"
      :style="{
        '--mobileAddFormHeight':
          mobile === 'mobile' ? screenHeight - 117 + 'px' : 'auto',
      }"
      :dialog-detail="dialogDetail"
      :data="currentProjectAccount"
      @send-close="sendClose"
    ></detail-description>
  </div>
</template>

<script lang="ts">
export default {
  name: "Projectspecialaccount",
};
</script>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import { ElTable, ElForm } from "element-plus";
import {
  ParamsType,
  ProjectAccount,
} from "@/api/system/projectspecialaccount/types";
import {
  getProjectAccountList,
  changeProjectAccountStatus,
} from "@/api/system/projectspecialaccount/index";
import { getDicts } from "@/store/modules/dict";

import ChangeStatusForm from "@/views/system/projectspecialaccount/changestatusform.vue";
import ExamineForm from "@/views/system/projectspecialaccount/examineform.vue";
import DetailDescription from "@/views/system/projectspecialaccount/detail.vue";

import { useScreen } from "@/store/modules/screen";

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenHeight = computed(() => screenStore.screenHeight);

function initScreen() {}

const tableList = ref<ProjectAccount[]>();
const total = ref(0);
const loading = ref(false);
const queryFormRef = ref(ElForm);
const queryParams = reactive<ParamsType>({
  pageIndex: 1,
  pageSize: 20,
});

const dialogExamine = reactive<DialogOption>({
  visible: false,
  title: "开户审批",
  id: 1,
});

const dialogStatus = reactive<DialogOption>({
  visible: false,
  title: "操作账户状态",
  id: 2,
});

const dialogDetail = reactive<DialogOption>({
  visible: false,
  title: "查看详情",
  id: 2,
});

const BankTypeTypes = getDicts("bankTypeTypes"); //银行类别

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<ProjectAccount[]>([]);
const handleSelectionChange = (val: ProjectAccount[]) => {
  multipleSelection.value = val;
};
const currentProjectAccount = ref<ProjectAccount>();

/* 列表查询 */
async function handleQuery() {
  loading.value = true;
  let list = await getProjectAccountList(queryParams);
  if (list.type === 0) {
    if (list.success) {
      tableList.value = list.data.list;
      queryParams.pageIndex = list.data.pageNum;
      queryParams.pageSize = list.data.pageSize;
      total.value = list.data.total;
    } else {
      ElMessage.error(list.msg);
    }
  } else {
    ElMessage.error(list.msg);
  }
  loading.value = false;
}

/* 重置查询 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageIndex = 1;
  queryParams.pageSize = 20;
  handleQuery();
}

/* 审批 */
function handleExamine() {
  if (
    multipleSelection.value.length > 1 ||
    multipleSelection.value.length == 0
  ) {
    ElMessage({
      message: "请选择一个专户",
      type: "warning",
    });
    return;
  }
  currentProjectAccount.value = multipleSelection.value[0];
  if (currentProjectAccount.value.accountStatus == 2) {
    ElMessage({
      message: "该专户已审核",
      type: "warning",
    });
    return;
  }
  dialogExamine.visible = true;
}

/* 修改状态 */

function handleStatus() {
  if (
    multipleSelection.value.length > 1 ||
    multipleSelection.value.length == 0
  ) {
    ElMessage({
      message: "请选择一个专户",
      type: "warning",
    });
    return;
  }
  currentProjectAccount.value = multipleSelection.value[0];
  dialogStatus.visible = true;
}

/* 查看详情 */

function openDetaill(data?: ProjectAccount) {
  if (data) {
    currentProjectAccount.value = data;
  } else {
    if (
      multipleSelection.value.length > 1 ||
      multipleSelection.value.length == 0
    ) {
      ElMessage({
        message: "请选择一个专户",
        type: "warning",
      });
      return;
    }
    currentProjectAccount.value = multipleSelection.value[0];
  }
  dialogDetail.visible = true;
}

/**关闭弹窗 */
function sendClose(dialog: string, query: boolean) {
  if (dialog == "examine") {
    dialogExamine.visible = false;
  }
  if (dialog == "status") {
    dialogStatus.visible = false;
  }
  if (dialog == "detail") {
    dialogDetail.visible = false;
  }
  if (query) {
    handleQuery();
  }
}
/**适配开户银行 */
function bankTypeFilter(type: string) {
  let tempType = BankTypeTypes.filter(
    (item: { value: string }) => item.value == type
  );
  if (tempType[0] && tempType[0].label) {
    return tempType[0].label;
  } else {
    return;
  }
}

onMounted(() => {
  initScreen();
  handleQuery();
});
</script>
